<template>
    <div class="wel-main-content">
        <!-- width:'18%' || '38%' -->
        <div v-for="(item, index) in routersList" :key="index" class="grid-item" :style="{
            width: index === 0 ? '38%' : '18%',
            background: `linear-gradient(171deg, #25d8e1, #0647ab)`,
        }" @click="handleOpenRouter(item)">
            <!-- <img style="width: 60%;max-width: 160px; height: auto; margin-bottom: 30px" :src="item.img ? item.img : '/img/wel-main-bg.png'" alt="" /> -->
            <div class="container">
                <div class="corner-bottom"></div>
                <img style="width: 90%; max-width: 90px; height: auto;" :src="getImageUrl(item)" alt="示例图片" />
            </div>
            {{ item.name }}
            <div class="menu-icon" v-if="item.type">
                <Edit style="width: 20px; height: 20px; margin-right: 8px" @click.stop="rowUpdate(item)" />
                <Delete style="width: 20px; height: 20px" @click.stop="rowDel(item)" />

            </div>
        </div>

    </div>
</template>
<script setup name="welMain">
import { ref, computed, watch, getCurrentInstance } from 'vue';
import { add, getList, remove, update } from '@/api/wel/wel'
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useStore(); // 获取 Vuex store
let routersList = ref([]);
import { $DialogForm } from '@smallwei/avue'
import { ElMessage, ElMessageBox } from 'element-plus'
const { appContext } = getCurrentInstance();
const option = ref({
    submitText: '完成',
    span: 24,
    column: [
        {
            label: "专病名称",
            prop: "name",
            rules: [{
                required: true,
                message: "请输入专病名称",
                trigger: "blur"
            }],
        },
        {
            label: "专病图标",
            prop: "icon",
            type: 'upload',
            listType: 'picture-img',
            dataType: 'string',
            action: '/blade-resource/oss/endpoint/put-file',
            tip: '只能上传jpg/png，且不超过1M',
            fileSize: 1000,
            accept: 'image/png, image/jpeg',

            propsHttp: {
                res: 'data',
                url: 'link',
            },
        }
    ]
})

const data = ref([]);
// 使用 computed 获取 store 中的 getters
const menu =
    computed(() => store.getters.menu) || JSON.parse(localStorage.getItem('saber-menu')).content;
const routesVal = computed(() => store.getters.routesVal);
const getImageUrl = computed(() => (item) => {
  return item?.icon || item?.img || '/img/wel-main-bg.png';
});
const initRoutes = path => {
    menu.value.forEach((item, index) => {
        if (item.path === path) {
            routersList.value = item.children
         if(path === '/wdbl') {
               let firstRouterList = item.children.slice(0, routersList.value.length - 2)
            let endRouterList = item.children.slice(routersList.value.length - 1)
            routersList.value = [...firstRouterList, ...data.value, ...endRouterList]
         }
        } 
    });
};
const rowUpdate = (row) => {
    let dialogForm = $DialogForm(appContext)({
        title: '修改专病数据库',
        width: '30%',
        menuPosition: 'right',
        option: option.value,
        data: row,
        beforeClose: (done) => {
            done()
        },
        callback: async (res) => {
            console.log(res.data)
            await update(res.data)
            onLoad('/wdbl');
            ElMessage.success('操作成功')
            res.done()
            res.close()
        }
    })

};
const rowDel = row => {
    ElMessageBox.confirm('确定将选择数据删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            return remove(row.id);
        })
        .then(() => {
            onLoad('/wdbl');
            ElMessage.success('操作成功!');
        });
};
const onLoad = (newVal) => {
    getList().then(res => {
        data.value = res.data.data;


        initRoutes(newVal);

    });
};
watch(
    routesVal,
    (newVal, oldVal) => {
        if (newVal === '/wdbl') {
            onLoad(newVal);
        } else {

            initRoutes(newVal);
        }
    },
    { deep: true, immediate: true }
);

const handleOpenRouter = item => {

    if (item.name === '新建专病数据库') {
        let dialogForm = $DialogForm(appContext)({
            title: '新建专病数据库',
            width: '30%',
            menuPosition: 'right',
            option: option.value,
            beforeClose: (done) => {

                done()
            },
            callback: async (res) => {
                console.log(res.data)
                await add(res.data)
                onLoad('/wdbl');
                ElMessage.success('添加成功')
                res.done()
                res.close()
            }
        })


    } else {
        router.push({
            path: item.path,
            query: {
                type: item.type
            }

        });
    }

};
</script>

<style scoped lang="scss">
.wel-main-content {
    width: 80%;
    /* height: 70%; */
    height: 64%;
    margin-top: 3%;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    /* 间距控制 */
    padding: 20px;
    box-sizing: border-box;
    /* align-items: center; */
    overflow-y: auto;
}

/* Webkit 滚动条样式 */
.wel-main-content::-webkit-scrollbar {
    width: 12px;
}

.wel-main-content::-webkit-scrollbar-track {
    background-color: #0a063a;
    border-radius: 10px;
}

.wel-main-content::-webkit-scrollbar-thumb {
    background-color: #255176;
    border-radius: 10px;
}

.wel-main-content::-webkit-scrollbar-thumb:hover {
    background-color: #8884b2;
}

/* Firefox 滚动条样式 */
.wel-main-content {
    scrollbar-width: thin;
    scrollbar-color: #255176 #0a063a;
}

.grid-item {
    height: 250px;
    /* 固定高度 */
    margin-bottom: 2%;
    /* 行间距 */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    /* 根据宽度自动计算 flex 基础值 */
    /* 基础4列布局 */
    /* flex: 1 1 calc(25% - 2%); */
    min-width: 200px;
    /* 最小宽度限制 */
    cursor: pointer;
    opacity: 0.9;
    position: relative;

    .menu-icon {
        position: absolute;
        right: 10px;
        top: 10px;
    }
}

.grid-item:hover {
    transform: translateY(-5px);
}

.container {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
}

/* 四个角的公共样式 */
.container::before,
.container::after,
.corner-bottom::before,
.corner-bottom::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #6ef7ff;
    box-sizing: border-box;
}

/* 左上角 */
.container::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

/* 右上角 */
.container::after {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

/* 左下角 */
.corner-bottom::before {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
}

/* 右下角 */
.corner-bottom::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .grid-item {
        flex: 1 1 calc(33.33% - 2%);
    }
}

@media (max-width: 768px) {
    .grid-item {
        flex: 1 1 calc(50% - 2%);
    }
}

@media (max-width: 480px) {
    .grid-item {
        flex: 1 1 100%;
    }
}
</style>